- add_to_breadcrumbs _('Users'), admin_users_path
- breadcrumb_title @user.name
- page_title _('Impersonation Tokens'), @user.name, _('Users')
- type = _('impersonation token')
- type_plural = _('impersonation tokens')

= render 'admin/users/head'

#js-new-access-token-app{ data: { access_token_type: type } }

= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card gl-border-b-0 gl-rounded-bottom-left-none gl-rounded-bottom-right-none js-toggle-container js-token-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body' }) do |c|
  - c.with_header do
    .gl-new-card-title-wrapper.gl-flex-direction-column
      %h3.gl-new-card-title
        = _('Impersonation tokens')
        .gl-new-card-count
          = sprite_icon('token', css_class: 'gl-mr-2')
          %span.js-token-count= @active_impersonation_tokens.size
      .gl-new-card-description
        = _("To see all the user's personal access tokens you must impersonate them first.")
    .gl-new-card-actions
      = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-toggle-button js-toggle-content', data: { testid: 'add-new-token-button' } }) do
        = _('Add new token')
  - c.with_body do
    .gl-new-card-add-form.gl-mt-3.gl-display-none.js-toggle-content.js-add-new-token-form
      = render 'shared/access_tokens/form',
        ajax: true,
        type: type,
        title: _('Add an impersonation token'),
        path: admin_user_impersonation_tokens_path,
        impersonation: true,
        token: @impersonation_token,
        scopes: @scopes,
        help_path: help_page_path('api/rest/index', anchor: 'impersonation-tokens')

#js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_impersonation_tokens.to_json } }
